<template>
	<view class="an-body an-user">
		<view class="an-top-bg" style="background: #fbf9fe">
			<nodata v-if="getlist.length==0"></nodata>
			<!-- 用户信息 -->
			 <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
			<view class="an-userInfo p10" v-for="(item,index) in getlist">
				<view class="an-user">
					<image style="width: 40px; height: 40px; background-color: #eeeeee;" mode="aspectFit" :src="item.app_headimgurl" @error="imageError"></image>
				</view>
				<view class="an-user-text1">
					<view style="color: black;">
						
						<p>受访人电话：{{item.app_mobile}}</p>
						<p>受访公司：{{item.app_company_name}}</p>
						<p>受访部门：{{item.app_dept_name}}</p>
						<p>受访人：{{item.app_user_name}}</p>
						<p>预约时间：{{timestampToTime(item.app_visittime)}}</p>
						<p>受访位置：{{item.app_address}}</p>
						
					</view>
					<view class="cc-view" >
						<button class="cc2" @click="details">详情</button>
						<button class="cc">待访问</button>
					</view>
				</view>
			</view>
			</mescroll-uni>

		</view>

		<!-- 底部导航 -->
		<footernav pagePath='myyuyue'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot } from '@/common/util.js';
import {getlist} from '../../common/api/user.js'; //引进requst方法
import {meetinglist} from '@/common/api/pool.js'
import defaultImg from '@/static/img/userImg.jpg';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
const icoList = [
	{
		id: 1,
		ico: 'icon-icon-test7',
		text: '文章管理',
		color: 'color1'
	},
	{
		id: 2,
		ico: 'icon-icon-test3',
		text: '留言管理',
		color: 'color2'
	},
	{
		id: 3,
		ico: 'icon-icon-test6',
		text: '打卡管理',
		color: 'color3'
	},
	{
		id: 4,
		ico: 'icon-wode',
		text: '用户管理',
		color: 'color4'
	}
];
export default {
	mixins: [MescrollMixin], // 使用mixin
	computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userInfo'])
	},
	data() {
		return {
			userinfo:[],
			userSrc: defaultImg,
			grids: [],
			page:0,
			pagesize:10,
			getlist:[],
			downOption:{
				auto: false,
				page:{
					size:10
				}
			},
			upOption:{
				auto:false
			},
			requestchanger:true,
			count:0,
			needpage:0
		};
	},
	onLoad() {
		// this.userSrc = hostRoot + 'uploads/' + this.userInfo.photoUrl;
		meetinglist({
			yueType:'vister',
			offset:this.page,
			length:this.pagesize
		}).then(res=>{
			console.log(res)
			this.getlist=res.data.data;
			this.count = res.data.count
			this.needpage = Math.ceil(this.count/this.pagesize)
			if(res.data.count <= this.pagesize){
				this.requestchanger = false
			}
		})
		
		uni.getStorage({
			key: 'userinfo',
			success: res => {
				this.userinfo = res.data
			}
		});
		// getlist({page:this.page,pagesize:this.pagesize}).then(res=>{
		// 	console.log(res)
		// 	this.getlist=res.data.data;
			
		// })
	},
	onShow() {
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		this.grids = [];
		if (!this.hasLogin) {
			this.bindLogin();
		} else if (this.userInfo.grade == 2 || this.userInfo.grade == 3) {
			this.grids = icoList;
		} else {
			this.grids.push(icoList[0]);
			this.grids.push(icoList[1]);
		}
	},
	methods: {
		...mapMutations(['logout']),
		/*下拉刷新的回调*/
			downCallback(){
				this.getlistrequest()
			},
		/*上拉加载的回调*/
			upCallback(page) {
			// this.mescroll.endSuccess(this.getlist.length, this.requestchanger);
				this.getlistrequest()
			},
		getlistrequest(){
			this.page++
			meetinglist({
				yueType:'vister',
				offset:this.getlist.length,
				length:this.pagesize
			}).then(res=>{
			for (let i = 0; i < res.data.data.length; i++) {
				this.getlist.push(res.data.data[i])
			}
			this.mescroll.endSuccess(res.data.count,this.requestchanger)
			if(this.getlist.length >= this.count){
				this.requestchanger = false
			}
			})
		},	
		clickBtn(id) {
			let url = '';
			switch (id) {
				case 1:
					url = '../yaoqing/yaoqing';
					break;
				case 2:
					url = '../message/messageList/messageList';
					break;
				case 3:
					url = '../sign/sign';
					break;
				case 4:
					url = '../user/userList';
					break;
				default:
					url = '../main/main';
			}
			uni.navigateTo({
				url: url
			});
		},
		editPwd() {
			// 修改密码
			uni.navigateTo({
				url: '../pwd/pwd'
			});
		},
		bindLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		bindLogout() {
			this.logout();
			uni.reLaunch({
				url: '../login/login'
			});
		},
		imageError(e) {
			this.userSrc = defaultImg;
		},
		
		timestampToTime(timestamp) {
		 
		        var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		 
		        var Y = date.getFullYear() + '-';
		 
		        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		 
		        var D = date.getDate() + ' ';
		 
		        var h = date.getHours() + ':';
		 
		        var m = date.getMinutes() ;
		 
		        var s = date.getSeconds();
		 
		        return Y+M+D+h+m;
		 
		    },
		details() {
			uni.navigateTo({
			    url: './appointmentDetails'
			});
		},
	}
};
</script>

<style lang="scss">
.an-user {
	.an-quick {
		display: flex;
		flex-direction: row;

		padding: 15px 15px;
		.an-ico-item {
			width: 25%;
			text-align: center;
			.an-ico-img {
				text-align: center;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				border-radius: 50%;
				color: #ffffff;
				.iconfont {
					font-size: 21px;
				}
				&.color1 {
					//background-color: #e9f4fd;
					background: linear-gradient(#bb51fb, #883ffe);
				}
				&.color2 {
					background: linear-gradient(#f9ac8e, #ec5e5c);
				}
				&.color3 {
					background: linear-gradient(#78f5b1, #34ce78);
				}
				&.color4 {
					background: linear-gradient(#68aefb, #007aff);
				}
			}
		}
	}
	.an-list {
		.an-ico {
			margin-right: 10px;
			.iconfont {
				font-size: 21px;
			}
			&.color1 {
				color: #ec5e5c;
			}
			&.color2 {
				color: #883ffe;
			}
			&.color3 {
				color: #34ce78;
			}
			&.color4 {
				color: #007aff;
			}
		}
	}
}
.uni-list-cell-divider{
	    background-color: white;
}
.an-top-bg{
	height: auto;
	padding: 0px 0px 0px 0px;
}
	
uni-button{
	width: 80px;
	height: 30px;
	font-size: 15px;
	line-height: 30px;
}
.cc{
	background: #007aff;
	color: white;
	margin-right: 10px;
	float: right;
}
.cc2{
	background: #ED6C19;
	color: white;
	margin-right: 10px;
	float: right;
}
.an-userInfo{
	background: white;
	margin-top: 10px;
}
.an-user{
	margin-top: 5px;
	width: 19%;
}
.an-user image{
	border-radius:50% ;
}
.an-user-text{
	margin-top: 5px;
}
.cc-view{
	text-align: right;
	margin-top: 5px;
}
.an-user-text1{
	width: 80%;
	margin-bottom: 10px;
}
</style>
